<script setup>
import { ref,reactive,computed,watch,watchEffect,onMounted,nextTick} from "vue";
import ziTitle from "./file.vue";
import ziGroup from "./dir.vue";
import {open,click,useHook} from "./fileHook"
import { uid } from "../../utils";
const id=uid()
const {state}=useHook(id)
const props=defineProps({
	dir:{
		type:Array,
		default:[]
	},
	title:{
		type:String,
		default:""
	},
	icon:{
		type:String,
		default:"arrow-down-bold"
	},
	iconClose:{
		type:String,
		default:"arrow-right-bold"
	},
	padding:{
		type:Number,
		default:0
	}
})
const emits=defineEmits(["myClick"])
const action=ref(false)
</script>

<template>
<div class="dir-title" @mouseup="()=>{
		action=!action
		open=id
		click=true
	}"
	:style="{paddingLeft:`calc( ${padding} * 1em )`}"
	:class="[state]">
	<div class="t" :style="{width:`calc( 100% - ${dir.length===0?'4.5em':'0'} )`}">
		<zi-icon :name="action?icon:iconClose" style="padding:0 .5em;"/>{{ title }}
	</div>
	<div v-if="dir.length===0" class="empty-folder">
		空文件夹
	</div>
</div>
<div v-show="action">
	<div v-for="temp in dir" :key="temp.title" class="file">
	<zi-group
		v-if="temp.children"
		:dir="temp.children"
		:title="temp.title"
		:icon="icon"
		:padding="padding+1"
	/>
	<zi-title
		:name="temp.icon"
		:padding="padding+1"
		:data="temp.data"
		@myClick="emits('myClick',$event)"
		v-else>
		{{ temp.title }}
	</zi-title>
</div>
</div>
</template>

<style scoped>

.dir-title{
	cursor: pointer;
	display: flex;
    flex-direction: row;
    justify-content: space-between;
	box-sizing: border-box;
	padding: 0.1em 0;
	border: 1px solid transparent;
	white-space: nowrap;
}
.dir-title:hover{
	background-color: var(--bg-hover);
}
.empty-folder{
	color: var(--empty-color);
	padding-right: .5em;
	word-break: keep-all;
}
.dir-title.action{
	background-color: var(--bg-action);
	border-color: var(--br-action);
}
.t{
	word-break: keep-all;
	text-overflow: ellipsis;
    overflow: hidden;
}
.blur{
	background-color: var(--bg-blur);
	border-color: var(--br-blur);
}
</style>